<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>组件代码生成器</title>
    <!-- 引入必要的库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/daisyui/dist/full.css" rel="stylesheet"/>
</head>
<body class="h-screen bg-gray-50 flex">
<!-- 左侧：代码效果区域 -->
<div class="w-1/2 flex items-center justify-center bg-gray-100">
    <div id="preview"
         class="flex items-center justify-center text-white font-bold"
         style="width: 200px; height: 200px; background-color: #3498db; border-radius: 10px;">
        Component Preview
    </div>
</div>

<!-- 右侧：生成的代码区域 -->
<div class="h-full flex flex-col w-1/2 p-4 bg-gray-50">
    <textarea id="generatedCode"
              class="h-64 p-4 border border-gray-300 rounded-md"
              readonly>
    </textarea>
    <div class="flex-grow">
        <!-- 悬浮控制器 -->
        <div id="controllerPanel"
             class="bg-white shadow-md p-4 rounded-lg overflow-y-auto">
            <div class="space-y-4">
                <!-- 各种控制项 -->
                <div>
                    <label class="block font-bold">Width</label>
                    <input id="widthRange" type="range" min="50" max="500" value="200" class="range w-full">
                    <span id="widthValue" class="text-sm text-gray-500">200px</span>
                </div>
                <div>
                    <label class="block font-bold">Height</label>
                    <input id="heightRange" type="range" min="50" max="500" value="200" class="range w-full">
                    <span id="heightValue" class="text-sm text-gray-500">200px</span>
                </div>
                <div>
                    <label class="block font-bold">Border Radius</label>
                    <input id="borderRadiusRange" type="range" min="0" max="50" value="10" class="range w-full">
                    <span id="borderRadiusValue" class="text-sm text-gray-500">10px</span>
                </div>
                <div>
                    <label class="block font-bold">Background Gradient Start</label>
                    <input id="gradientStartColor" type="color" value="#3498db" class="w-full h-10 p-0 border-none">
                </div>
                <div>
                    <label class="block font-bold">Background Gradient End</label>
                    <input id="gradientEndColor" type="color" value="#2ecc71" class="w-full h-10 p-0 border-none">
                </div>
                <div>
                    <label class="block font-bold">Glass Effect</label>
                    <input id="glassOpacity" type="range" min="0.1" max="1" step="0.1" value="1" class="range w-full">
                    <span id="glassOpacityValue" class="text-sm text-gray-500">1</span>
                    <input id="glassBlur" type="range" min="0" max="20" step="1" value="0" class="range w-full">
                    <span id="glassBlurValue" class="text-sm text-gray-500">0px</span>
                </div>
                <div>
                    <label class="block font-bold">Box Shadow (Card Effect)</label>
                    <input id="boxShadow" type="range" min="0" max="50" value="10" class="range w-full">
                    <span id="boxShadowValue" class="text-sm text-gray-500">10px</span>
                </div>
                <div>
                    <label class="block font-bold">Text Content</label>
                    <input id="textContent" type="text" value="Component Preview"
                           class="w-full border border-gray-300 rounded-md p-2">
                </div>
            </div>
        </div>
    </div>
</div>


<!-- JavaScript -->
<script>
    $(document).ready(function () {
        const genCodeEle = $('#generatedCode');
        const controllerPanel = $('#controllerPanel');
        let isDragging = false;
        let offsetX, offsetY;

        // 更新预览样式和代码
        function updateAll() {
            const params = {
                width: $('#widthRange').val(),
                height: $('#heightRange').val(),
                borderRadius: $('#borderRadiusRange').val(),
                gradientStartColor: $('#gradientStartColor').val(),
                gradientEndColor: $('#gradientEndColor').val(),
                glassOpacity: $('#glassOpacity').val(),
                glassBlur: $('#glassBlur').val(),
                boxShadow: $('#boxShadow').val(),
                textContent: $('#textContent').val(),
            };

            $('#preview').css({
                width: params.width + 'px',
                height: params.height + 'px',
                background: `linear-gradient(to bottom, ${params.gradientStartColor}, ${params.gradientEndColor})`,
                borderRadius: params.borderRadius + 'px',
                opacity: params.glassOpacity,
                filter: `blur(${params.glassBlur}px)`,
                boxShadow: `0 0 ${params.boxShadow}px rgba(0, 0, 0, 0.2)`,
            }).text(params.textContent);

            genCodeEle.val(
                `<div style="width: ${params.width}px; height: ${params.height}px; ` +
                `background: linear-gradient(to bottom, ${params.gradientStartColor}, ${params.gradientEndColor}); ` +
                `border-radius: ${params.borderRadius}px; opacity: ${params.glassOpacity}; ` +
                `filter: blur(${params.glassBlur}px); box-shadow: 0 0 ${params.boxShadow}px rgba(0, 0, 0, 0.2);">` +
                `${params.textContent}</div>`
            );

            // 更新显示值
            $('#widthValue').text(params.width + 'px');
            $('#heightValue').text(params.height + 'px');
            $('#borderRadiusValue').text(params.borderRadius + 'px');
            $('#glassOpacityValue').text(params.glassOpacity);
            $('#glassBlurValue').text(params.glassBlur + 'px');
            $('#boxShadowValue').text(params.boxShadow + 'px');
        }

        // 初始化
        updateAll();

        // 绑定事件
        $('#widthRange, #heightRange, #borderRadiusRange, #gradientStartColor, #gradientEndColor, ' +
            '#glassOpacity, #glassBlur, #boxShadow, #textContent').on('input', updateAll);
    });
</script>
</body>
</html>
